<script lang="ts" setup>
import { usePopupStore } from '@/store/popup';
import { storeToRefs } from 'pinia';
import { useLocale } from '@/locale/locale';

const { t } = useLocale();
const popupStore = usePopupStore();
const { carUseNoticeRef } = storeToRefs(popupStore);

const props = defineProps<{
  waitTime: number;
  timeoutPreTime: number;
  timeoutPrePrice: number;
  cancelPolicy: string;
}>();

const emit = defineEmits(['submit']);

function handleConfirm() {
  popupStore.closeCarUseNotice();
  emit('submit');
}
</script>

<template>
  <apt-popup-car
    ref="carUseNoticeRef"
    :showConfirmBtn="false"
    :title="t('TransferProUseCarRead')"
    height="80vh"
    title-position="left"
    @close="popupStore.closeCarUseNotice()"
  >
    <view class="apt-car-use-notice-picker-contain">
      <view class="apt-car-use-notice-picker-contain-item">
        <view class="apt-car-use-notice-picker-contain-item-t">
          {{ t('TransferProUseCarWait', { minute: waitTime }) }}
        </view>
        <view class="apt-car-use-notice-picker-contain-item-c">
          <text>{{ t('TransferProUseCarWaitInfo', { minute: waitTime }) }}</text>
        </view>
      </view>
      <view class="apt-car-use-notice-picker-contain-item">
        <view class="apt-car-use-notice-picker-contain-item-t">
          {{ t('TransferProUseCarPriceAbout') }}
        </view>
        <view class="apt-car-use-notice-picker-contain-item-c">
          <text>{{ t('TransferProUseCarPriceAboutInfo') }}</text>
        </view>
      </view>
      <view class="apt-car-use-notice-picker-contain-item">
        <view class="apt-car-use-notice-picker-contain-item-t">
          {{ t('TransferProUseCarPriceNotAbout') }}
        </view>
        <view class="apt-car-use-notice-picker-contain-item-c">
          <text>
            {{
              t('TransferProUseCarPriceNotAboutInfo', {
                price: parseFloat(timeoutPrePrice) + 'JPY',
                minute1: timeoutPreTime,
                minute2: timeoutPreTime,
                minute3: timeoutPreTime,
                minute4: timeoutPreTime
              })
            }}
          </text>
        </view>
      </view>
      <view class="apt-car-use-notice-picker-contain-item">
        <view class="apt-car-use-notice-picker-contain-item-t">
          {{ t('TransferProUseCarCancel') }}
        </view>
        <view class="apt-car-use-notice-picker-contain-item-c">
          <text>{{ cancelPolicy }}</text>
        </view>
      </view>
      <view class="apt-car-use-notice-picker-contain-item">
        <view class="apt-car-use-notice-picker-contain-item-t">
          {{ t('TransferProUseCarChange') }}
        </view>
        <view class="apt-car-use-notice-picker-contain-item-c">
          <text>{{ t('TransferProUseCarChangeInfo') }}</text>
        </view>
      </view>

      <view class="apt-car-use-notice-picker-contain-bottom">
        <view @click="handleConfirm">{{ t('TransferProSubmitOrder') }}</view>
      </view>
    </view>
  </apt-popup-car>
</template>

<style lang="scss">
.apt-car-use-notice-picker-contain {
  padding-bottom: 130rpx;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 130rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 130rpx);
  &-item {
    margin-top: 32rpx;

    &-t {
      font-weight: 500;
      font-size: 28rpx;
      color: #3d3d3d;
      line-height: 40rpx;
      margin-bottom: 16rpx;
    }

    &-c {
      text {
        font-weight: 400;
        font-size: 24rpx;
        color: #3d3d3d;
        line-height: 34rpx;
      }
    }
  }

  &-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding-left: 24rpx;
    padding-right: 24rpx;
    padding-bottom: 30rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 30rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
    background: #FFFFFF;

    view {
      height: 76rpx;
      line-height: 76rpx;
      background: #ff5a60;
      border-radius: 8rpx;
      font-weight: 500;
      font-size: 30rpx;
      color: #ffffff;
      text-align: center;
    }
  }
}
</style>
